<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from "@better-scroll/core"
  import Pullup from '@better-scroll/pull-up'
  import ObserveDOM from '@better-scroll/observe-dom'
  import ObserveImage from '@better-scroll/observe-image'

  BScroll.use(Pullup)
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)

  export default {
    name: "Scroll",
    props: {
      probeType: {
        type: Number,
        default: 0
      },
      pullUpLoad: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        bscroll: null

      }
    },
    mounted: function () {
      this.bscroll = new BScroll(this.$refs.wrapper, {
        //better-scroll的probeType会影响该组件效率，没有业务要求时给默认值0
        probeType: this.probeType,
        pullUpLoad: this.pullUpLoad,
        //开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。 observe-dom
        observeDOM: true,
        //开启对 wrapper 子元素中图片元素的加载的探测。无论图片的加载成功与否，都会自动调用 BetterScroll 的 refresh 方法来重新计算可滚动的宽度或者高度
        observeImage: true,
        click: true
      });

      //监听滚动事件
      if (this.probeType == 2 || this.probeType == 3) {
        this.bscroll.on("scroll", (position) => {
            this.$emit("scroll", position);
          }
        );
      }

      //监听滚动到底部
      if (this.pullUpLoad) {
        this.bscroll.on('pullingUp', () => {
          this.$emit("pullingUp");
          this.bscroll.finishPullUp();
        });
      }
    },
    methods: {
      scrollTo(x, y, time = 1200) {
        this.bscroll.scrollTo(x, y, time);
      }
    }
  }
</script>

<style scoped>

</style>
